<template>
  <GlobalContainer :backgroundImage="`${OSS_URL}/images/baoxiu/head_bg.png`">
    <GlobalHeader title="幸福随手拍" showBack :backgroundImage="`${OSS_URL}/images/baoxiu/head_bg.png`" :fixed="true" />
    <div class="h-full rounded-20 bg-white px-40 py-30">
      <div class="mb-32 flex items-center">
        <image src="../../static/images/tousu/home_icon.png" class="mr-16 size-64" />
        <div class="home-title text-34 leading-56 text-[#303133]">幸福小区 12栋 3单元 401号</div>
      </div>
      <div class="form-c">
        <div class="form-item">
          <div class="upload-content flex flex-wrap gap-32">
            <ImageUpload :fileList="fileList" :max="3" @fileListChange="fileListChange" />
          </div>
        </div>
        <div class="form-item">
          <div class="label">留言</div>
          <div class="text-area">
            <wd-textarea
              v-model="form.content"
              placeholder="说说你发现的幸福..."
              :maxlength="100"
              custom-class="custom-class"
              custom-textarea-container-class="custom-class"
              custom-textarea-class="custom-class"
              show-word-limit
            />
          </div>
        </div>
      </div>

      <div class="btn-c px-30 py-20 pb-safe">
        <div class="btn" @click="submitHandle">提交</div>
      </div>
    </div>
  </GlobalContainer>
</template>

<script setup>
import { saveRepairOrder } from '@/common/api/report'
import { showToast, showLoading, hideLoading } from '@/utils'
import ImageUpload from '@/components/imageUpload'
const OSS_URL = import.meta.env.VITE_OSS_URL
const form = ref({
  content: '',
  type: 2
})
const fileList = ref([])
const fileListChange = list => {
  fileList.value = list
}

const submitHandle = () => {
  if (!fileList.value.length) {
    showToast('请上传图片')
    return
  }
  if (!form.value.content) {
    showToast('请输入留言')
    return
  }
  showLoading()
  saveRepairOrder({
    ...form.value,
    images: fileList.value.map(item => item).join(',')
  })
    .then(res => {
      if (res) {
        uni.navigateBack()
      }
    })
    .finally(() => {
      hideLoading()
    })
}
</script>

<style lang="scss" scoped>
.form-item {
  margin-bottom: 30rpx;
  .label {
    font-weight: 400;
    font-size: 30rpx;
    line-height: 46rpx;
    color: #303133;
    margin-bottom: 16rpx;
  }
  .form-input {
    background: #f5f7fa;
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    padding: 20rpx 24rpx;
    border: 1px solid #dcdfe6;
  }
  .upload-item {
    background: #fafafa;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    border: 1px solid #dcdfe6;
  }
  :deep(.custom-class) {
    background: #f5f7fa !important;
    font-size: 30rpx;
    color: #303133;
  }
  :deep(.text-area) {
    background: #f5f7fa;
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    border: 1px solid #dcdfe6;
  }
  :deep(.wd-textarea__count) {
    background-color: #f5f7fa;
  }
}

.btn-c {
  position: fixed;
  bottom: 12rpx;
  left: 0;
  width: 100%;
  background: #fff;
  z-index: 100;
  .btn {
    height: 94rpx;
    background: #1e90ff;
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    text-align: center;
    line-height: 94rpx;
    color: #fff;
    font-size: 32rpx;
  }
}
</style>
